import BasePage from "../base";
import {Col, notification, Row, Tabs} from "antd";
import React, {useEffect, useState} from "react";
import TextArea from "antd/es/input/TextArea";
import {extend} from "umi-request";
import { useHistory, useModel  } from 'umi';
export default function LanguageRecognition() {
    const {TabPane} = Tabs;
    const history = useHistory()

    const [text, setText] = useState("");
    const [language, setLanguage] = useState("");
    const { initialState } = useModel('@@initialState');

    const request = extend({
        timeout: 1000,
        headers: {
            'Content-Type': 'application/json',
            // 'Accept': 'application/json',
            'token': sessionStorage.getItem("token")
        },
        params: {
            token: sessionStorage.getItem("token") // 所有请求默认带上 token 参数
        },
        // errorHandler: function (error) {
        //     history.push('/500')
        // }
    });

    const Notification = type => {
      notification[type]({
          message: 'Error!',
          duration: 1,
          description:
              'Language not support!',
      });
    };

    function language_recognize() {
        request
            .get(initialState.BACK_END_URL+ "language?text="+text)
            .then(function(response) {
                console.log(response);
                recognize(response['src']);
            })
            .catch(function(error) {
                history.push('/500')
            });

    }


    function recognize(result) {
        switch (result) {
            case "zh":
                setLanguage("中文");
                break;
            case "en":
                setLanguage("英语");
                break;
            case "jp":
                setLanguage("日语");
                break;
            case "kor":
                setLanguage("韩语");
                break;
            case "ru":
                setLanguage("俄语");
                break;
            case "vie":
                setLanguage("越南语");
                break;
            case "th":
                setLanguage("泰语");
                break;
            default:
                Notification("error")
        }
    }

    useEffect(() => {
        if(sessionStorage.getItem("isLogin") !== "1"){
            history.push("/403")
        }
    })

    return (
        <BasePage>
            <Row wrap={true} style={innerHeight = 200}>
                <Col span={12}>
                    <Tabs defaultActiveKey="1">
                        <TabPane tab="自动语言检测" key="1">
                            请输入需要识别语言的单词或文本
                        </TabPane>
                    </Tabs>
                </Col>
                <Col span={12}>
                    <Tabs defaultActiveKey="1">
                        <TabPane tab="语言识别结果" key="1">
                            识别出的语言种类在此显示
                        </TabPane>
                    </Tabs>
                </Col>
            </Row>
            <Row wrap={true} style={innerHeight = 400}>
                <Col span={12}><TextArea
                    value={text}
                    onPressEnter={language_recognize}
                    onChange={(event => {setText(event.target.value)})}
                    placeholder="按Ctrl+Enter执行识别"
                    autoSize={{ minRows: 12, maxRows: 30 }}
                /></Col>
                <Col span={12}><TextArea
                    value={language}
                    placeholder=""
                    autoSize={{ minRows: 12, maxRows: 30 }}
                /></Col>
            </Row>
        </BasePage>
    )
}